.incident-chat {
  .copilotKitInput {
    @apply sticky bottom-0 bg-white w-[98%] !important;
    @apply flex items-center outline-none rounded-tremor-default px-3 py-2 mx-2 text-tremor-default focus:ring-2 transition duration-100 border shadow-tremor-input focus:border-tremor-brand-subtle focus:ring-tremor-brand-muted dark:shadow-dark-tremor-input focus:dark:border-dark-tremor-brand-subtle focus:dark:ring-dark-tremor-brand-muted bg-tremor-background dark:bg-dark-tremor-background hover:bg-tremor-background-muted dark:hover:bg-dark-tremor-background-muted text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis border-tremor-border dark:border-dark-tremor-border placeholder:text-tremor-content dark:placeholder:text-dark-tremor-content !important;
  }

  .copilotKitInput:hover textarea {
    @apply bg-tremor-background-muted dark:bg-dark-tremor-background-muted transition duration-100 !important;
  }

  .copilotKitInput textarea {
    margin-bottom: 5px;
  }

  .copilotKitMessages {
    @apply h-full flex flex-col !important;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }

  .copilotKitMessages > div {
    @apply flex-1 overflow-y-auto !important;
    overscroll-behavior: contain;
    will-change: scroll-position;
  }

  .copilotKitUserMessage {
    @apply bg-orange-300 !important;
  }

  .copilotKitMessages .suggestion {
    @apply bg-white text-black scale-100 border-tremor-border border-2 hover:border-tremor-brand hover:text-tremor-brand hover:bg-tremor-brand-muted dark:border-dark-tremor-brand dark:hover:bg-dark-tremor-brand-muted transition !important;
  }

  .chat-container {
    @apply h-[calc(100vh-30rem)] flex flex-col;
    scroll-behavior: smooth;
  }

  .chat-messages {
    @apply flex-1 overflow-y-scroll overflow-x-hidden;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    will-change: scroll-position;
  }

  [data-message-role="assistant"] {
    position: relative;
  }

  .message-feedback {
    opacity: 0;
    transition: opacity 0.2s;
  }

  [data-message-role="assistant"]:hover .message-feedback {
    opacity: 1;
  }

  .message-feedback button {
    color: var(--tremor-content);
    opacity: 0.5;
    transition: opacity 0.2xs;
  }
  .message-feedback button:hover {
    opacity: 1;
  }
}
